<template>
  <div class="setting-container">
    <div class="app-container">
      <el-card v-loading="loading">
        <!-- 栅格布局 搜索新增开始 -->
        <div class="app-containers">
          <el-button type="success" class="tjcs" @click="addFn()">
            添加菜单
          </el-button>
        </div>
        <!-- 渲染数据 -->
        <el-table
          :data="tableData"
          style="width: 100%"
          row-key="id"
          :tree-props="{ children: 'childs' }"
          :default-expand-all="true"
        >
          <el-table-column prop="title" label="标题" />
          <el-table-column prop="code" label="权限点代码" />
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-button type="text" size="small" @click="editFn(row.id)">
                修改
              </el-button>
              <el-button type="text" size="small" @click="delFn(row.id)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页组件结束 -->
      </el-card>
      <!-- 新增编辑的弹层 -->
      <el-dialog
        :visible="showDialog"
        :title="showDialogTitle"
        @close="closeFn()"
      >
        <!-- 表单内容 -->
        <el-form
          ref="ruleForm"
          label-width="100px"
          :rules="rules"
          :model="formData"
        >
          <el-form-item label="权限组名称">
            <el-radio-group v-model="formData.isPoint" :disabled="disableds">
              <el-radio label="false">菜单</el-radio>
              <el-radio label="true">权限点</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="权限组名称">
            <el-select v-model="formData.title" placeholder="请选择权限组">
              <!-- <el-option
                v-for="item
                  in tableData"
                :key="item.id"
                :label="item.title"
                :value="item.title"
              /> -->
              <!-- <el-option :label="formData.title" :value="formData.id" /> -->
              <!-- <el-tree
                :data="tableData"
                :props="defaultProps"
                default-expand-all
                el-icon-plus
                :expand-on-click-node="false"
                @node-click="handleNodeClick"
              /> -->
            </el-select>
          </el-form-item>
          <el-form-item label="权限代码" prop="code">
            <el-input v-model="formData.code" />
          </el-form-item>
          <el-form-item label="权限主题" prop="title">
            <el-input v-model="formData.title" />
          </el-form-item>
        </el-form>

        <template #footer>
          <div style="text-align: right">
            <el-button @click="closeFn()">取消</el-button>
            <el-button type="primary" @click="submitsubject()">确定</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getMenuslistApi,
  getDeletmenusApi,
  getAddmenusApi,
  getMenusApi,
  getPermissionlistApi
} from '@/api/menus'
// import { recursionDepartsFn } from '@/utils/index'
export default {
  data() {
    return {
      disableds: false,
      defaultProps: {
        children: 'childs',
        label: 'title'
      },
      tableData: [],
      rules: {
        code: [{ required: true, message: '请输入权限代码', trigger: 'blur' }],
        title: [{ required: true, message: '请输入权限标题', trigger: 'blur' }]
      },
      formData: {
        id: '',
        isPoint: 'true', // 是否权限点
        pid: 0, // 父节点的id
        code: '', // 权限点代码
        title: '' // 菜单标题
        // id: 0// 编号
      },
      showDialog: false, // 弹层
      loading: false
    }
  },
  computed: {
    // 通过计算属性来计算 是编辑还是添加 的标题 通过id来判断
    showDialogTitle() {
      return this.formData.id ? '编辑菜单' : '新增菜单'
    }
  },
  created() {
    // 获取当前页数据
    this.getmenusList()
  },
  methods: {
    // handleNodeClick 选择属=数性节点
    handleNodeClick(data) {
      // console.log(data.title)
      this.formData.title = data.title
      this.formData.pid = data.id
    },
    // 获取当前页数据
    async getmenusList() {
      this.loading = true // 设置加载等待动画
      const data = await getMenuslistApi()
      //  recursionDepartsFn(data, '0')
      this.tableData = data
      this.loading = false
    },
    // 删除数据
    delFn(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await getDeletmenusApi(id)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
        .finally(() => {
          this.getmenusList()
        })
    }, // 关闭弹层
    closeFn() {
      this.formData = {}
      this.$refs.ruleForm.resetFields()
      this.showDialog = false
    }, // 修改菜单打开窗口
    async editFn(id) {
      this.disableds = true
      this.showDialog = true
      const data = await getMenusApi(id)
      this.formData = data
      console.log(id)
    }, // 新增菜单打开窗口
    async addFn() {
      this.disableds = false
      const data = await getPermissionlistApi()
      console.log(data)
      // this.getmenusList()
      // this.formData.title = '主导航'
      this.showDialog = true
    },
    // 新增菜单请求接口
    async submitsubject() {
      if (!this.formData.id) {
        this.$refs.ruleForm.validate(async (valid) => {
          if (valid) {
            if (this.formData.isPoint === 'false') {
              this.formData.isPoint = false
            } else {
              this.formData.isPoint = true
            }
            await getAddmenusApi(
              this.formData.isPoint,
              this.formData.pid,
              this.formData.code,
              this.formData.title
            )
            console.log('添加')
            this.$message.success('添加成功')
          } else {
            this.$message.error('表单条件未满足')
            console.log(`表单里未满足条件的字段：${JSON.stringify(valid)}`)
            return false
          }
        })
      } else {
        this.showDialog = false

        this.$message.success('编辑成功')
      }
      console.log(this.formData)

      this.formData = {} // 提交完了重置一下表单
      this.getmenusList() // 提交完了重新请求数据
      this.showDialog = false
    }
  }
}
</script>
<style lang="scss" scoped>
.tjcs {
  float: right;
}
.app-containers {
  margin-bottom: 15px;
}
::v-deep .el-table thead {
  color: #909399;
  font-weight: 500;
  background-color: #909399;
}
.fycs {
  margin-top: 15px;
}
::v-deep.el-dialog__header {
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#1493fa),
    to(#01c6fa)
  );
  background: linear-gradient(90deg, #1493fa, #01c6fa);
  background: #409eff;
  border-radius: 9px 9px 0 0;
}
</style>
